<template>
  <div class="xxbzwh_component baseContainer">
    <div class="baseBoderShadow bgWhite baseBorderRadius">
      <!-- 查询区域 -->
      <div class="operate_container">
        <div class="operate_item">
          <div class="operate_left">所属院系</div>
          <div class="operate_right">
            <el-select
              v-model="yxId"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(vo, i) in yxList"
                :key="i"
                :value="vo.ID"
                :label="vo.MC"
              ></el-option>
            </el-select>
          </div>
        </div>
        <!-- 在职状态 -->
        <div class="operate_item">
          <div class="operate_left">在职状态</div>
          <div class="operate_right">
            <el-select
              v-model="zzzt"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(vo, i) in zzztList"
                :key="i"
                :value="vo.ID"
                :label="vo.MC"
              ></el-option>
            </el-select>
          </div>
        </div>
        <!-- 职工号 -->
        <div class="operate_item">
          <div class="operate_left">职工号</div>
          <div class="operate_right">
            <el-input
              v-model.trim="zgh"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </div>
        </div>
        <!-- 姓名 -->
        <div class="operate_item">
          <div class="operate_left">姓名</div>
          <div class="operate_right">
            <el-input
              v-model.trim="search"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </div>
        </div>
        <!-- 查询按钮 -->
        <div class="operate_item_btnGroup">
          <el-button
            type="warning"
            @click="searchFunc"
          >搜索</el-button>
          <el-button
            type="primary"
            class="btnGray"
            @click="resetFunc"
          >重置</el-button>
        </div>
      </div>
      <!--  -->
      <div class="handle_wrap">
        <el-button  type="primary"
                    @click="jzgSyncGoSysUser"
        >同步教职工</el-button>
        <el-button
          type="primary"
          @click="addFunc"
        >新增</el-button>
        <el-button @click="delFunc(1)">删除</el-button>
        <el-button
          @click="importClick"
        >导入</el-button>
        <el-button @click="exportClick(1)">导出选中</el-button>
        <el-button @click="exportClick">导出全部</el-button>
      </div>
      <!-- 表格区域 -->
      <div class="table_wrap">
        <div class="table_box">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="序号"
              width="60"
              align="center"
            >
              <template slot-scope="scope">{{ pageSize * (currentPage - 1) + 1 + scope.$index }}</template>
            </el-table-column>
            <el-table-column label="档案号">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.DABH"
                >{{scope.row.DABH}}</div>
              </template>
            </el-table-column>
            <el-table-column label="职工号">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.zgh"
                >{{scope.row.zgh}}</div>
              </template>
            </el-table-column>
            <el-table-column label="姓名">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.xm"
                >{{scope.row.xm}}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="性别"
              width="60"
            >
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.xbMc"
                >{{scope.row.xbMc}}</div>
              </template>
            </el-table-column>
            <el-table-column label="身份证号">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.SFZH"
                >{{scope.row.SFZH}}</div>
              </template>
            </el-table-column>
            <el-table-column label="所属院系">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.yxMc"
                >{{scope.row.yxMc}}</div>
              </template>
            </el-table-column>
            <el-table-column label="学历">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.zgxlMc"
                >{{scope.row.zgxlMc}}</div>
              </template>
            </el-table-column>
            <el-table-column label="技术职称">
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.jszcMc"
                >{{scope.row.jszcMc}}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="在职状态"
              width="80"
            >
              <template slot-scope="scope">
                <div
                  class="one_line"
                  :title="scope.row.zzzt"
                >{{scope.row.zzzt}}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div class="el-table-btn-wrap">
                  <el-button
                    type="warning"
                    size="mini"
                    round
                    @click="editFunc(scope.row)"
                  >编辑</el-button>
                  <el-button
                    size="mini"
                    round
                    @click="delFunc(scope.row)"
                  >删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page_box">
          <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize">
        </el-pagination>
        </div>
      </div>
    </div>
    <!-- 新增和编辑区域 -->
    <el-dialog
      title="新增/编辑教师信息"
      width="1000px"
      :visible.sync="dialogVisible"
    >
      <div>
        <el-form
          :model="formData"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-collapse v-model="activeNames">
            <el-collapse-item :name="1">
              <template slot="title">
                基本信息
              </template>
              <div class="collapse_wrap displayTable width100">
                <div class="jbxx_left displayTableCell">
                  <div class="zjz_img_wrap">
                    <img
                      :src="header_img"
                      alt=""
                      class="zjz_img"
                    >
                  </div>
                  <div class="zjz_img_btn">
                    <Upload
                      ref="upload_ref"
                      action="/web/tbBaseFile/uploadFile"
                      :auto-upload="true"
                      accept=".png, .jpg, .jpeg"
                      :formData="formData_upload"
                      :before-upload="beforeUpload"
                      successMsg="上传成功!"
                      @success="uploadSuccess"
                      @uploadError="uploadError"
                    >
                      <el-button
                        type="primary"
                        s-ze="mini"
                        slot="fileBtn"
                      >上传</el-button>
                    </Upload>
                  </div>
                </div>
                <div class="displayTableCell jbxx_right">
                  <el-row>
                    <template v-for="(item, index) in formDataObj.jbxx">
                      <el-col
                        :key="index"
                        :span="item.width"
                      >
                        <el-form-item
                          :prop="item.prop"
                          :label="item.label"
                        >
                          <template v-if="item.type === 'text'">
                            <Input
                              :type="item.type"
                              v-model="formData[item.prop]"
                            />
                          </template>
                          <template v-else-if="item.type === 'select'">
                            <Select
                              v-model="formData[item.prop]"
                              :dictCode="item.code"
                              :multiple="item.multiple"
                            ></Select>
                          </template>
                          <template v-else-if="item.type === 'date'">
                            <el-date-picker
                              v-model="formData[item.prop]"
                              type="date"
                              format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd"
                              placeholder="选择日期"
                              :editable="false"
                            ></el-date-picker>
                          </template>
                          <template v-else-if="item.type === 'cascader'">
                          <Cascader
                            v-model="formData[item.prop]"
                            :asyncUrl="item.asyncUrl"
                            :ajaxData="item.ajaxData"
                            :method="item.method"
                          ></Cascader>
                          <!-- <Tree
                            placeholder="请选择"
                            :popper-append-to-body="true"
                          ></Tree> -->
                        </template>
                        </el-form-item>
                      </el-col>
                    </template>
                  </el-row>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item :name="2">
              <template slot="title">学历信息和在校情况</template>
              <div class="collapse_wrap">
                <el-row>
                  <template v-for="(item, index) in formDataObj.xlxx">
                    <el-col
                      :key="index"
                      :span="item.width"
                    >
                      <el-form-item
                        :prop="item.prop"
                        :label="item.label"
                      >
                        <template v-if="item.type === 'text'">
                          <Input
                            :type="item.type"
                            v-model="formData[item.prop]"
                          />
                        </template>
                        <template v-else-if="item.type === 'select'">
                          <Select
                            v-model="formData[item.prop]"
                            :dictCode="item.code"
                          ></Select>
                        </template>
                        <template v-else-if="item.type === 'date'">
                          <el-date-picker
                            v-model="formData[item.prop]"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期"
                            :editable="false"
                          ></el-date-picker>
                        </template>
                        <template v-else-if="item.type === 'cascader'">
                          <Cascader
                            v-model="formData[item.prop]"
                            :asyncUrl="item.asyncUrl"
                            :ajaxData="item.ajaxData"
                            :method="item.method"
                          ></Cascader>
                          <!-- <Tree
                            placeholder="请选择"
                            :popper-append-to-body="true"
                          ></Tree> -->
                        </template>
                      </el-form-item>
                    </el-col>
                  </template>
                </el-row>
              </div>
            </el-collapse-item>
            <el-collapse-item :name="3">
              <template slot="title">在校时间</template>
              <div class="collapse_wrap">
                <el-row>
                  <template v-for="(item, index) in formData.zxsj">
                    <el-col
                      :key="`${index}0${index}`"
                      :span="8"
                    >
                      <el-form-item
                        :prop="`zxsj.${index}.start`"
                        label="来校日期"
                        :rules="{
                        required: true, message: '来校日期不能为空', trigger: 'blur'
                      }"
                      >
                        <el-date-picker
                          v-model="item.start"
                          type="date"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期"
                          :editable="false"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :key="`${index}0${index + 1}`"
                      :span="8"
                    >
                      <el-form-item
                        :prop="`zxsj.${index}.end`"
                        label="离校日期"
                      >
                        <el-date-picker
                          v-model="item.end"
                          type="date"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期"
                          :editable="false"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col
                      :key="`${index}0${index + 2}`"
                      :span="8"
                    >
                      <div style="margin-bottom: 22px;">
                        <el-button
                          icon="el-icon-plus"
                          @click="addNewItem(item, index)"
                        ></el-button>
                        <el-button
                          icon="el-icon-minus"
                          @click="removeItem(item, index)"
                        ></el-button>
                      </div>
                    </el-col>
                  </template>
                </el-row>
              </div>
            </el-collapse-item>
            <el-collapse-item :name="4">
              <template slot="title">职称职务</template>
              <div class="collapse_wrap">
                <el-row>
                  <template v-for="(item, index) in formDataObj.zczw">
                    <el-col
                      :key="index"
                      :span="item.width"
                    >
                      <el-form-item
                        :prop="item.prop"
                        :label="item.label"
                      >
                        <template v-if="item.type === 'text'">
                          <Input
                            :type="item.type"
                            v-model="formData[item.prop]"
                          />
                        </template>
                        <template v-else-if="item.type === 'select'">
                          <Select
                            v-model="formData[item.prop]"
                            :dictCode="item.code"
                          ></Select>
                        </template>
                        <template v-else-if="item.type === 'date'">
                          <el-date-picker
                            v-model="formData[item.prop]"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期"
                            :editable="false"
                          ></el-date-picker>
                        </template>
                        <template v-else-if="item.type === 'checkbox'">
                          <el-checkbox
                          v-model="formData[item.prop]"
                          :true-label="1"
                          :false-label="0"
                          >&nbsp;&nbsp;</el-checkbox>
                        </template>
                      </el-form-item>
                    </el-col>
                  </template>
                </el-row>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-form>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="submitForm"
        >确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 导入区域 -->
    <el-dialog
      :visible.sync="dialogVisibleImportExcel"
      title="导入"
      width="600px"
    >
      <div class="uploadBox clearfix">
        <div class="clearfix">
          <Upload
            ref="upload_excel_ref"
            :excelaccept="true"
            @success="uploadSuccess_excel"
            :beforeUpload="beforeUpload_excel"
            @uploadError="uploadError_excel"
            action='/web/jzgxx/uploadJzgFile'
            title="导入"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            class="fl"
          ></Upload>
          <a
            href="/web/jzgxx/downloadJzgxxTemplate"
            class="fl downUrl"
          >下载模板</a>
        </div>
        <div class="buttonClass clearfix">
          <el-button
            type="primary"
            @click="onSubmit_excel"
            class="fl"
          >导入</el-button>
          <el-button
            class="fl"
            @click="refer_excel"
          >重置</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Upload from "@/components/webupload/index.vue";
import Input from "./input.vue";
import Select from "./select.vue";
import Cascader from "./cascader.vue";
// import Tree from "./common-select/tree-select.vue";
import { getDictByBzdm } from '@/api/common.js';
export default {
  name: 'jzgxxwh',
  components: {
    Upload,
    Input,
    Select,
    Cascader,
    // Tree
  },
  data() {
    let checkSfzh = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("身份证号不能为空"));
      }
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      const flag = reg.test(value);
      if (flag === false) {
        // 不合法
        callback(new Error("身份证号不合法"));
      } else {
        callback();
      }
    };
    return {
      // 教职工信息维护，所有系统都有，所以使用BASE
      formData_upload: {
        projectName: 'BASE'
      },
      dialogVisibleImportExcel: false, // 导入的弹出层
      editId: '',
      // TODO
      zpId: "", // 照片id
      yxId: "",
      yxList: [],
      zzzt: "",
      zzztList: [],
      zgh: "", // 教职工id
      search: "", // 姓名
      searchData: {
        yxId: '', // 所属院系
        zzzt: '',
        zgh: "",
        search: ""
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      multipleSelection: [],
      dialogVisible: false,
      formData: {
        dabh: "", // 档案编号
        zgh: "", // 职工号
        sfzh: "", // 身份证号
        xm: "", // 姓名
        csrq: "", // 出生日期
        lxdh: "", // 联系电话
        xbId: "", // 性别
        zzmmId: "", // 政治面貌
        rdrq: "", // 入党日期
        mzId: "", // 民族
        hkxzId: "", // 户口性质
        hkszd: "", // 户口所在地
        jtzz: "", // 家庭地址
        gjdqId: "", // 国籍
        jg: "", // 籍贯
        jtcsId: "", // 家庭出身
        hyzkId: "", // 婚姻状况
        dzxx: "", // 电子邮箱
        yrxsId: "", // 用工形式
        glnj: [], // 管理年级
        dyxlId: "", // 第一学历
        dyxwId: "", // 第一学位
        zgxlId: "", // 最高学历
        zgxwId: "", // 最高学位
        cjgzny: "", // 参加工作年月
        cjrq: "", // 从教日期
        gwlId: "", // 岗位类别
        jzglbId: "", // 教职工类别
        dqztId: "", // 在职状态
        ksId: '', // 所属行政部门
        yxId: '', // 所属行政部门
        // 在校时间
        zxsj: [
          {
            start: "",
            end: ""
          }
        ],
        // 职称职务
        zyzgId: "", // 职业资格
        zyzgqdsj: "", // 取得时间
        zyzgprsj: "", // 聘任时间
        zyjszcId: "", // 技术职称
        jszcqdsj: "", // 职称取得时间
        jszcqdsj: "", // 职称聘任时间
        xzjbId: "", // 行政职务
        xzzwqdsj: "", // 职务取得时间
        xzzwprsj: "", // 职务聘任时间
        sfssjs: "", // 是否双师教师
        ssqdsj: "", // 双师取得时间
        ssprsj: "", // 双师聘任时间
        rtjsj: "", // 任同级职务时间
        qtzc: "" // 其他职称
      },
      formDataObj: {
        jbxx: [
          { label: "档案编号", type: "text", prop: "dabh", width: 8 },
          { label: "职工号", type: "text", prop: "zgh", width: 8 },
          { label: "身份证号", type: "text", prop: "sfzh", width: 8 },
          { label: "姓名", type: "text", prop: "xm", width: 8 },
          { label: "出生日期", type: "date", prop: "csrq", width: 8 },
          { label: "联系电话", type: "text", prop: "lxdh", width: 8 },
          {
            label: "性别",
            code: "DM-RDXB",
            type: "select",
            prop: "xbId",
            width: 8
          },
          {
            label: "政治面貌",
            code: "DM-ZZMM",
            type: "select",
            prop: "zzmmId",
            width: 8
          },
          { label: "入党日期", type: "date", prop: "rdrq", width: 8 },
          {
            label: "民族",
            code: "DM-ZZGMZMC",
            type: "select",
            prop: "mzId",
            width: 8
          },
          {
            label: "户口性质",
            code: "XXDM-HKXZ",
            type: "select",
            prop: "hkxzId",
            width: 8
          },
          { label: "户口所在地", type: "text", prop: "hkszd", width: 8 },
          { label: "家庭地址", type: "text", prop: "jtzz", width: 24 },
          { label: "籍贯", type: "text", prop: "jg", width: 24 },
          {
            label: "国籍",
            code: "DM-SJGGDQMC",
            type: "select",
            prop: "gjdqId",
            width: 8
          },
          // {
          //   label: "籍贯",
          //   asyncUrl: "/web/xzqh/queryXzqhTree",
          //   method: "get",
          //   type: "cascader",
          //   prop: "jgId",
          //   width: 8
          // },
          {
            label: "家庭出身",
            code: "DM-JTCS",
            type: "select",
            prop: "jtcsId",
            width: 8
          },
          {
            label: "婚姻状况",
            code: "DM-HYZK",
            type: "select",
            prop: "hyzkId",
            width: 8
          },
          { label: "电子邮箱", type: "text", prop: "dzxx", width: 8 },
          {
            label: "用工形式",
            code: "XXDM-YRXS",
            type: "select",
            prop: "yrxsId",
            width: 8
          },
          {
            label: "管理年级",
            code: "XXDM-RXNJ",
            type: "select",
            prop: "glnj",
            width: 24,
            multiple: true
          }
        ],
        xlxx: [
          {
            label: "第一学历",
            code: "XXDM-LZXL",
            type: "select",
            prop: "dyxlId",
            width: 8
          },
          {
            label: "第一学位",
            code: "DM-SQXWLB",
            type: "select",
            prop: "dyxwId",
            width: 8
          },
          {
            label: "最高学历",
            code: "XXDM-LZXL",
            type: "select",
            prop: "zgxlId",
            width: 8
          },
          {
            label: "最高学位",
            code: "DM-SQXWLB",
            type: "select",
            prop: "zgxwId",
            width: 8
          },
          { label: "参加工作年月", type: "date", prop: "cjgzny", width: 8 },
          { label: "从教日期", type: "date", prop: "cjrq", width: 8 },
          {
            label: "岗位类别",
            code: "XXDM-GWLB",
            type: "select",
            prop: "gwlId",
            width: 8
          },
          {
            label: "教职工类别",
            code: "XXDM-JHNLSG",
            type: "select",
            prop: "jzglbId",
            width: 8
          },
          {
            label: "在职状态",
            code: "XXDM-ZGZT",
            type: "select",
            prop: "dqztId",
            width: 8
          },
          {
            label: "所属行政部门",
            type: "cascader",
            asyncUrl: "/web/zzjg/queryZzjgByType",
            method: "post",
            ajaxData: { type: 1 },
            prop: "ksId",
            width: 8
          },
          {
            label: "所属教学部门",
            type: "cascader",
            asyncUrl: "/web/zzjg/queryZzjgByType",
            method: "post",
            ajaxData: { type: 0 },
            prop: "yxId",
            width: 8
          }
        ],
        zxsj: [
          { label: "来校日期", type: "date", prop: "lxrq", width: 8 },
          { label: "离校日期", type: "date", prop: "lxrq", width: 8 }
        ],
        zczw: [
          {
            label: "职业资格",
            code: "XXDM-ZYZG",
            type: "select",
            prop: "zyzgId",
            width: 8
          },
          { label: "取得时间", type: "date", prop: "zyzgqdsj", width: 8 },
          { label: "聘任时间", type: "date", prop: "zyzgprsj", width: 8 },
          {
            label: "技术职称",
            code: "DM-ZYJSZC",
            type: "select",
            prop: "zyjszcId",
            width: 8
          },
          { label: "职称取得时间", type: "date", prop: "jszcqdsj", width: 8 },
          { label: "职称聘任时间", type: "date", prop: "jszcprsj", width: 8 },
          // TODO
          {
            label: "行政职务",
            code: "DM-GBZWJB",
            type: "select",
            prop: "xzjbId",
            width: 8
          },
          { label: "职务取得时间", type: "date", prop: "xzzwqdsj", width: 8 },
          { label: "职务聘任时间", type: "date", prop: "xzzwprsj", width: 8 },
          { label: "是否双师教师", type: "checkbox", prop: "sfssjs", width: 8 },
          { label: "双师取得时间", type: "date", prop: "ssqdsj", width: 8 },
          { label: "双师聘任时间", type: "date", prop: "ssprsj", width: 8 },
          { label: "任同级职务时间", type: "date", prop: "rtjsj", width: 8 },
          { label: "其他职称", type: "text", prop: "qtzc", width: 8 }
        ]
      },
      rules: {
        dabh: [
          { required: true, message: "档案编号不能为空", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        zgh: [
          { required: true, message: "职工号不能为空", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        sfzh: [
          // { required: true, message: "身份证号不能为空", trigger: "blur" },
          { validator: checkSfzh, required: true, trigger: "blur" }
        ],
        xm: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
          { min: 1, max: 100, message: "长度在 1 到 100 个字符", trigger: "blur" }
        ],
        csrq: [
          { required: true, message: "出生日期不能为空", trigger: "blur" }
        ],
        lxdh: [
          { required: true, message: "联系电话不能为空", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        hkszd: [
          { min: 0, max: 100, message: "长度在 0 到 100 个字符", trigger: "blur" }
        ],
        jtzz: [
          { min: 0, max: 100, message: "长度在 0 到 100 个字符", trigger: "blur" }
        ],
        jg: [
          { min: 0, max: 200, message: "长度在 0 到 200 个字符", trigger: "blur" }
        ],
        ksId: [
          { required: true, message: "所属行政部门不能为空", trigger: "change" }
        ],
        yxId: [
          { required: true, message: "所属教学部门不能为空", trigger: "change" }
        ],
        qtzc: [
          { min: 0, max: 100, message: "长度在 0 到 100 个字符", trigger: "blur" }
        ]
      },
      header_img: "",
      activeNames: [1, 2, 3, 4]
    };
  },
  mounted() {
    this.getAllYx();
    this.findList();
    this.getZzzt();
  },
  methods: {
    /**
     * @name exportClick
     * @description 导出
     * @author cjs1992
     * @date 2019-12-23 10:57:41
     */
    exportClick (flag) {
      let obj = {};
      if (flag === 1) {
        // 导出选中
        if (this.multipleSelection.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择要导出的数据!'
          });
          return;
        }
        let list = this.multipleSelection.map((item) => item.id);
        obj = {
          idList: list
        };
      }
      // /web/jzgxx/exportJzgXx
      this.$downloadFunc({
        method: 'get',
        url: '/web/jzgxx/exportJzgXx',
        data: {
          ...this.searchData,
          ...obj
        }
      });
    },
    /**
     * @name getZzzt
     * @description 获取在职状态
     * @author cjs1992
     * @date 2019-12-20 15:37:51
     */
    async getZzzt () {
      const bzdm = 'XXDM-ZGZT';
      const res = await await getDictByBzdm({
        bzdm
      });
      this.zzztList = res.data || [];
    },
    /**
     * @name addNewItem
     * @description 添加新的行
     * @author cjs1992
     * @date 2019-11-19 16:31:55
     */
    async addNewItem(data, index) {
      this.formData.zxsj.splice(index + 1, 0, {
        start: "",
        end: ""
      });
    },
    /**
     * @name removeItem
     * @description 移除某一项
     * @author cjs1992
     * @date 2019-11-19 16:39:08
     */
    async removeItem(data, index) {
      if (this.formData.zxsj.length === 1) {
        return;
      }
      this.formData.zxsj.splice(index, 1);
    },
    /**
     * @name getAllYx
     * @description 获取所有院系
     * @author cjs1992
     * @date 2019-11-15 10:51:31
     */
    async getAllYx() {
      const res = await this.$store.dispatch("base-common/getZzjgYxAll");
      this.yxList = res.data || [];
    },
    /**
     * @name findList
     * @description 获取教职工列表
     * @author cjs1992
     * @date 2019-11-15 11:06:49
     */
    async findList() {
      const { zzzt, yxId, zgh, search } = this.searchData;
      const res = await this.$store.dispatch("jcsz-jzgxxwh/findList", {
        zzzt,
        yxId,
        zgh,
        search,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      });
      const data = res.data;
      if (data) {
        this.tableData = data.list || [];
        this.totalSize = data.total;
      } else {
        this.tableData = [];
        this.totalSize = 0;
      }
    },
    /**
     * @name searchFunc
     * @description 搜索
     * @author cjs1992
     * @date 2019-11-15 11:01:43
     */
    async searchFunc() {
      this.searchData = {
        yxId: this.yxId, // 所属院系
        zzzt: this.zzzt,
        zgh: this.zgh,
        search: this.search
      };

      // this.findList();
      this.handleCurrentChange(1);
    },
    /**
     * @name handleSizeChange
     * @description 分页条数切换
     * @author cjs1992
     * @date 2019-12-20 15:54:56
     */
    handleSizeChange (val) {
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    /**
     * @name handleCurrentChange
     * @description 切换哪一页
     * @author cjs1992
     * @date 2019-12-20 15:55:27
     */
    handleCurrentChange (val) {
      this.currentPage = val;
      this.findList();
    },
    /**
     * @name resetFunc
     * @description 重置
     * @author cjs1992
     * @date 2019-11-15 11:01:55
     */
    async resetFunc() {
      this.yxId = '';
      this.zzzt = '';
      this.zgh = '';
      this.search = '';
      this.searchFunc();
    },
    /**
     * @name addFunc
     * @description 新增
     * @author cjs1992
     * @date 2019-11-15 11:02:58
     */
    async addFunc() {
      this.editId = '';
      this.header_img = '';
      this.zpId = '';
      this.resetFormData();
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.resetForm();
      })
    },
    /**
     * @name editFunc
     * @description 编辑
     * @author cjs1992
     * @date 2019-11-15 11:52:42
     */
    async editFunc(data) {
      this.header_img = '';
      this.resetFormData();
      const { id } = data;
      this.editId = id;
      const res = await this.$store.dispatch('jcsz-jzgxxwh/getJzgxxById', {
        id
      });
      const obj = res.data || {};
      if (obj.zpId) {
        // 获取照片路径
        try {
          const res_zp = await this.$store.dispatch('jcsz-jzgxxwh/queryTbBaseFileById', { id: obj.zpId });
          this.header_img = res_zp.data.fileUrl;
        } catch (error) {
          console.log('获取照片路径出错');
        }
      }
      // 处理管理年级数据
      obj.glnj = ( obj.glnj ? obj.glnj.split(',').map(vo => Number(vo)) : [] );
      // 处理数据
      let formData = {};
      Object.assign(formData, obj);
      let list = [];
      // 判断是否存在kssjs
      (obj.kssjs && obj.kssjs.length) ? obj.kssjs.forEach((item, index) => {
        list.push({
          start: item,
          end: obj.jssjs[index]
        });
      }) : list.push({ start: '', end: '' });
      // 将在校时间赋值给formData
      formData.zxsj = list;
      // 清除无用数据（不需要传递给后台的）
      // delete formData.headerurl;
      delete formData.kssjs;
      delete formData.jssjs;
      this.resetForm();
      this.formData = formData;
      // this.header_img = obj.headerurl || '';
      this.dialogVisible = true;
      list = null, formData = null;
    },
    /**
     * @name delFunc
     * @description 删除
     * @author cjs1992
     * @date 2019-11-15 11:03:09
     */
    async delFunc(data) {
      let ids = '';
      if (data === 1) {
        // 批量删
        if (this.multipleSelection.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择要删除的数据!'
          });
          return;
        }
        ids = this.multipleSelection.map((item) => item.id);
      } else {
        ids = [ data.id ];
      }
      this.$confirm("您确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await this.$store.dispatch('jcsz-jzgxxwh/delBjByIds', { ids });
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.handleCurrentChange(1);
        })
        .catch(() => {});
    },
    /**
     * @name handleSelectionChange
     * @description 选中切换
     * @author cjs1992
     * @date 2019-11-15 11:04:35
     */
    async handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /**
     * @name resetFormData
     * @description 重置表格数据
     * @author cjs1992
     * @date 2019-12-23 15:13:31
     */
    resetFormData () {
      this.formData = {
        dabh: "", // 档案编号
        zgh: "", // 职工号
        sfzh: "", // 身份证号
        xm: "", // 姓名
        csrq: "", // 出生日期
        lxdh: "", // 联系电话
        xbId: "", // 性别
        zzmmId: "", // 政治面貌
        rdrq: "", // 入党日期
        mzId: "", // 民族
        hkxzId: "", // 户口性质
        hkszd: "", // 户口所在地
        jtzz: "", // 家庭地址
        gjdqId: "", // 国籍
        jg: "", // 籍贯
        jtcsId: "", // 家庭出身
        hyzkId: "", // 婚姻状况
        dzxx: "", // 电子邮箱
        yrxsId: "", // 用工形式
        glnj: [], // 管理年级
        dyxlId: "", // 第一学历
        dyxwId: "", // 第一学位
        zgxlId: "", // 最高学历
        zgxwId: "", // 最高学位
        cjgzny: "", // 参加工作年月
        cjrq: "", // 从教日期
        gwlId: "", // 岗位类别
        jzglbId: "", // 教职工类别
        dqztId: "", // 在职状态
        ksId: '', // 所属行政部门
        yxId: '', // 所属行政部门
        // 在校时间
        zxsj: [
          {
            start: "",
            end: ""
          }
        ],
        // 职称职务
        zyzgId: "", // 职业资格
        zyzgqdsj: "", // 取得时间
        zyzgprsj: "", // 聘任时间
        zyjszcId: "", // 技术职称
        jszcqdsj: "", // 职称取得时间
        jszcqdsj: "", // 职称聘任时间
        xzjbId: "", // 行政职务
        xzzwqdsj: "", // 职务取得时间
        xzzwprsj: "", // 职务聘任时间
        sfssjs: "", // 是否双师教师
        ssqdsj: "", // 双师取得时间
        ssprsj: "", // 双师聘任时间
        rtjsj: "", // 任同级职务时间
        qtzc: "" // 其他职称
      };
    },
    /**
     * @name resetForm
     * @description 重置表格
     * @author cjs1992
     * @date 2019-12-23 15:12:42
     */
    resetForm () {
      // 清除数据
      this.resetFormData();
      try {
        this.$refs['ruleForm'].resetFields();
      } catch (error) {
        // 无需理会
      }
    },
    submitForm() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          // 处理来校日期和离校日期
          let start = [],
            end = [];
          for (let item of this.formData.zxsj) {
            const { start: s, end: e } = item;
            if (s && e) {
              // 开始时间和结束时间都不为空
              if (new Date(e) < new Date(s)) {
                this.$message({
                  type: 'warning',
                  message: '离校日期不能早于来校日期'
                });
                return;
              }
            }
            start.push(s);
            end.push(e);
          }  
          // this.formData.zxsj.map(item => {
          //   start.push(item.start);
          //   end.push(item.end);
          // });
          this.formData.kssjs = start;
          this.formData.jssjs = end;
          // 处理所属行政部门和所属教学部分
          // const ksIdStr = this.formData.ksId[this.formData.ksId.length - 1];
          // const yxIdStr = this.formData.yxId[this.formData.yxId.length - 1];
          this.formData.zpId = this.zpId;
          // 处理管理年级
          // console.log(this.formData);
          // this.sureFunc();
          this.add(
            {
              ...this.formData,
              glnj: this.formData.glnj.join(',')
              // ksId: JSON.parse(ksIdStr).id,
              // yxId: JSON.parse(yxIdStr).id
            }
          )
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * @name add
     * @description 添加教职工
     * @author cjs1992
     * @date 2019-11-20 10:00:31
     */
    async add (data) {
      let url = 'add', msg = '新增', obj = {};
      if (this.editId) {
        url = 'editJzgXxById';
        msg = '编辑';
        obj = {
          id: this.editId
        }
      }
      const res = await this.$store.dispatch(`jcsz-jzgxxwh/${url}`, {
        ...data,
        ...obj
      });
      this.$message({
        type: 'success',
        message: `${msg}成功!`
      });
      this.dialogVisible = false;
      this.findList();
    },
    /**
     * @name beforeUpload
     * @description 上传前校验
     * @author cjs1992
     * @date 2019-11-15 13:20:52
     */
    beforeUpload(param) {
      const { name, type } = param;
      const arr = ["png", "jpg", "jpeg"];
      const str = name.split(".");
      if (arr.indexOf(str[str.length - 1]) === -1) {
        this.$message({
          type: "warning",
          message: `‘${name}’不是受支持的文件格式!`
        });
        return false;
      }
      return true;
    },
    /**
     * @name uploadError
     * @description 上传失败
     * @author cjs1992
     * @date 2019-11-15 13:21:27
     */
    async uploadError() {
      this.$refs.upload_ref.$refs.fileUpIpt.value = "";
      this.$refs.upload_ref.fileName = "";
      this.header_img = '';
      this.zpId = '';
    },
    /**
     * @name uploadSuccess
     * @description 上传成功
     * @author cjs1992
     * @date 2019-11-15 13:22:00
     */
    async uploadSuccess(file) {
      file = file.data || {};
      this.$refs.upload_ref.$refs.fileUpIpt.value = "";
      this.$refs.upload_ref.fileName = "";
      this.header_img = file.fileUrl;
      this.zpId = file.id;
    },
    /**
     * @name importClick
     * @description 教职工信息导入
     * @author cjs1992
     * @date 2019-11-22 08:36:32
     */
    async importClick () {
      // /web/jzgxx/uploadJzgFile
      this.dialogVisibleImportExcel = true;
      // 清空
      this.$nextTick(() => {
        this.refer_excel();
      });
    },
    /**
     * @name beforeUpload_excel
     * @description
     * @author cjs1992
     * @date 2019-11-22 08:43:26
     */
    beforeUpload_excel(param) {
      const { name, type } = param;
      const arr = ["xls", "xlsx"];
      const str = name.split(".");
      if (arr.indexOf(str[str.length - 1]) === -1) {
        this.$message({
          type: "warning",
          message: `‘${name}’不是受支持的文件格式!`
        });
        return false;
      }
      return true;
    },
    /**
     * @name uploadError_excel
     * @description
     * @author cjs1992
     * @date 2019-11-22 08:43:56
     */
    async uploadError_excel() {
      this.$refs.upload_excel_ref.$refs.fileUpIpt.value = "";
      this.$refs.upload_excel_ref.fileName = "";
    },
    /**
     * @name uploadSuccess_excel
     * @description
     * @author cjs1992
     * @date 2019-11-22 08:44:12
     */
    async uploadSuccess_excel(res) {
      this.dialogVisibleImportExcel = false;
      if (res.data) {
        this.$msgbox({
          message: res.msg + "点击下载可以查看上传文件失败原因",
          showCancelButton: true,
          confirmButtonText: "下载",
          cancelButtonText: "取消",
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "下载中...";
              this.$downloadFunc({
                url: "/web/bjxxb/downloadBjImportErrorData",
                data: {
                  // lists: JSON.stringify(res.data).replace(/\"/g,"'"),
                  key: res.data
                },
                method: "get"
              });
              setTimeout(() => {
                done();
                instance.confirmButtonLoading = false;
              }, 3000);
            } else {
              done();
            }
          }
        });
      }
    },
    /**
     * @name onSubmit_excel
     * @description 提交
     * @author cjs1992
     * @date 2019-11-22 08:50:16
     */
    onSubmit_excel () {
      if(this.$refs.upload_excel_ref.fileName==''){
			   this.$message({
			    type: 'warning',
			    message: '请选择上传文件!'
			  })
  		}else{
  			this.$refs.upload_excel_ref.inputChange()
  		}
    },
    /**
     * @name refer_excel
     * @description 重置
     * @author cjs1992
     * @date 2019-11-22 08:50:48
     */
    refer_excel () {
      this.$refs.upload_excel_ref.fileName=''
			this.$refs.upload_excel_ref.$refs.fileUpIpt.value ='' ;
    },
    /**
     * @name jzgSyncGoSysUser
     * @description 同步教职工到用户表
     * @author lousk
     * @date 2019-12-18
     */
    async jzgSyncGoSysUser() {
      const res = await this.$store.dispatch("jcsz-jzgxxwh/jzgSyncGoSysUser");
      if (res.status == 1000) {
        this.$message({
          message: "共同步了《"+res.data+"》位教职工到用户表中",
          type: "success"
        });
      }
    },
  }
};
</script>
<style lang="scss" scoped>
@import "../common-switch.scss";
.operate_container {
  padding: 22px;
  box-shadow: 0 5px 39px 0 rgba(0, 0, 0, 0.1);
}
.operate_item {
  display: inline-table;
  margin-right: 20px;
  margin-bottom: 12px;
}
.operate_left {
  display: table-cell;
  padding-right: 12px;
  width: 88px;
  color: #344563;
  text-align: right;
  font-size: 14px;
  box-sizing: border-box;
}
.operate_right {
  display: table-cell;
  /deep/ {
    .el-select,
    .el-input {
      width: 185px;
    }
  }
}
.operate_item_btnGroup {
  display: inline-block;
  width: 272px;
  text-align: right;
}
.operate_item_btnGroup .el-button {
  width: 106px;
}
.table_wrap {
  padding: 10px 20px;
}
.collapse_wrap {
  width: 100%;
  .jbxx_left {
    width: 150px;
    .zjz_img_wrap {
      width: 100%;
      height: 200px;
      border: 1px solid #e0e0e0;
      .zjz_img {
        width: 100%;
        height: 100%;
      }
    }
    .zjz_img_btn {
      /deep/ {
        form {
          text-align: center;
          margin-top: 10px;
        }
      }
    }
  }
}
.displayTable {
  display: table;
  &.width100 {
    width: 100%;
  }
  .displayTableCell {
    display: table-cell;
    vertical-align: top;
  }
}
.demo-ruleForm {
  // font-size: 0;
  /deep/ .el-form-item {
    // display: inline-block;
    // width: 50%;
    vertical-align: top;
    .el-select {
      width: 100%;
    }
    .el-date-editor {
      width: 100%;
    }
  }
}
.uploadBox {
  margin: 100px auto;
  padding: 0 30px;
}
.downUrl {
  line-height: 36px;
  margin-left: 30px;
  display: block;
  color: #12ad8a;
  font-size: 14px;
  text-decoration: underline;
}
</style>
